require('../../less/controls/checkbox-radio.less');
var React = require('react');

module.exports = React.createClass({
	displayName:'Checkbox',
	getInitialState:function(){
		return {

		}
	},
	componentDidMount:function(){
		this.checked(this.props.checked, false, null);
		this.disabled(this.props.disabled);
	},
	__onClick: function (event){
		if(this.props.disabled){
			return;
		}
		if(event.target.tagName=='INPUT'){
			this._checked = event.target.checked;
			this.props.onChange && this.props.onChange(event, this._checked, this);
		} else {
			this.checked(!this._checked, true, event);
			event.stopPropagation();
			event.preventDefault();
		}

	},
	disabled: function (value) {
		this._disabled = value;
		this.refs.cb.getDOMNode().disabled = value;
	},
	checked: function (value, ifTriggeChange, event) {
		this._checked = value;
		this.refs.cb.getDOMNode().checked = value;
		(ifTriggeChange===undefined?true:ifTriggeChange) && this.props.onChange && this.props.onChange(event, value, this);
	},
	render: function(){
		return (
			<label className={"c-checkbox " + (this.props.className||'')} onClick={(event)=>this.__onClick(event)} style={this.props.style}>
				<input ref='cb' type={this.props.type||'checkbox'} />
				{
					this.props.text && <span className="label">{this.props.text}</span>
				}
			</label>
		);
	}
});
